<template>
  <div id="big_Box">
    <!-- 界面最上方nav框 -->
    <div id="navList">
      <div class="navTitle">
        <h3>Cesiumjs Demo</h3>
      </div>
      <div id="addLayer" class="navLists">添加图层</div>
      <div id="addtestBtn" class="navLists">测试按钮</div>
    </div>
    <!-- 添加图层 表格 -->
    <div id="addForm">
      <form>
        <h3>添加图层</h3>
        <!-- checkbox标签 -->
        <div id="checkboxForm" class="checkboxForm">
          <input type="checkbox">TMS
          <input type="checkbox">WMS
          <input type="checkbox">WMTS
        </div>
        <!-- 输入url地址 -->
        <div class="addFormItem">
          <span>url:</span>
          <input id="urlInput" placeholder="请输入服务url">
          <div id="defaultLayerName">···</div>
        </div>
        <!-- 输入服务名称 -->
        <div class="addFormItem">
          <span>服务名称:</span>
          <input id="layerInput" placeholder="请输入服务名称">
        </div>
        <!-- 输入图层名称 -->
        <div class="addFormItem">
          <span>图层名称:</span>
          <input id="nameInput" placeholder="请输入图层名称">
        </div>
        <!-- 按钮 添加/取消 -->
        <div class="addFormBtn">
          <div id="layerAdd" class="addLayer1">添加</div>
          <div id="layerCancel" class="addLayer2">取消</div>
        </div>

      </form>
    </div>
    <!-- 图层列表 -->
    <div id="layerListForm">
      <ul id="layerUl">
        <h3 class="layerLi01">图层列表</h3>
      </ul>
    </div>
    <!-- 显示图层添加结果 -->
    <div id="showAddResult">
      <div id="addOk">
        图层添加成功!
      </div>
      <div id="addFail">
        图层添加失败!
      </div>
    </div>
    <!-- cesium -->
    <div id="container"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import './main.css'
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0Y2YxYWFiOC1hMjkxLTQ3MmQtOTMzOC02ODQzNGYzZThjYmIiLCJpZCI6MTg0MTQwLCJpYXQiOjE3MDI0NDY4MDR9.Xax9xESQVAXXQgP_6OnWSj0AAvpwFh_FLQAxjdwfaZ0"
onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //地形图层
    terrain: Cesium.Terrain.fromWorldTerrain(),
    //信息窗口
    infoBox: false,
    //显示查询按钮
    // geocoder: false,
    //home按钮
    homeButton: false,
    //控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择
    baseLayerPicker: false,
    //帮助按钮
    navigationHelpButton: false,
    //播放动画
    animation: false,
    //时间线
    timeline: false,
    //全屏模式
    fullscreenButton: false,
    //

  })

  // cesium基本设置
  function cesiumDefaultModel(viewer) {
    //隐藏cesium Icon-logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';
    //帧率
    viewer.scene.debugShowFramesPerSecond = true;
    // cesium的默认视角
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);
    // 抗锯齿
    viewer.scene.fxaa = true;
    viewer.scene.postProcessStages.fxaa.enabled = false;
    // 水雾特效
    viewer.scene.globe.showGroundAtmosphere = true;
    // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
    viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
    viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
    viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
    //设置缩放程度
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 30000000;
    //设置视角缩放类型
    //设置鼠标操作
    viewer.scene.screenSpaceCameraController.zoomEventTypes = [
      Cesium.CameraEventType.RIGHT_DRAG,
      Cesium.CameraEventType.WHEEL,
      Cesium.CameraEventType.PINCH,
    ];
    viewer.scene.screenSpaceCameraController.tiltEventTypes = [
      Cesium.CameraEventType.MIDDLE_DRAG,
      Cesium.CameraEventType.PINCH,
      {
        eventType: Cesium.CameraEventType.LEFT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
      },
      {
        eventType: Cesium.CameraEventType.RIGHT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
      },
    ];
    //地形夸张 拉伸地形
    // viewer.scene.globe.terrainExaggeration = 1.0;
    //添加OMS 房屋
    // viewer.scene.primitives.add(await Cesium.createOsmBuildingsAsync())
    //添加瓦片坐标信息
    // viewer.imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider())
    // 将三维球定位到中国
  }
  cesiumDefaultModel(viewer); //调用方法

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
    orientation: {
      heading: Cesium.Math.toRadians(348.4202942851978),
      pitch: Cesium.Math.toRadians(-89.74026687972041),
      roll: Cesium.Math.toRadians(0)
    },
    complete: function callback() {
      // 定位完成之后的回调函数
    }
  });

  // 设置添加图层成功/失败结果框 显示时间 方法
  function layerAddResult(item) {
    item.style.display = "block";
    setTimeout(function () {
      item.style.display = "none"
    }, 2000)
  }

  // 控制show/del文本大小
  function showdelText(id) {
    id.style.fontSize = "8pt";
    id.style.textAlign = "center";
    id.style.lineHeight = "20px";
  }

  // 添加图层li方法
  var flagList = []; //声明flagList数组
  function addListLayer(ul, flag) {
    flagList.push(flag);
    var layerListLi = document.createElement("li");//添加li
    var layerListDivShow = document.createElement("div");//添加Showdiv
    var layerListDivDel = document.createElement("div");//添加DelDiv
    var layerLIstDivShowText = document.createTextNode('S');//show按钮text
    var layerLIstDivDelText = document.createTextNode('D');//del按钮text
    var layerListText = document.createTextNode(nameInput.value);//添加图层名称
    if (nameInput.value == '') {
      layerListText = document.createTextNode(flag);
    }
    layerListLi.appendChild(layerListText);//向li中添加图层名称
    layerListLi.appendChild(layerListDivShow);//向li中添加Showdiv
    layerListDivShow.appendChild(layerLIstDivShowText);//添加show文本
    layerListLi.appendChild(layerListDivDel);//向li中添加Deldiv
    layerListDivDel.appendChild(layerLIstDivDelText);//添加del文本
    layerListLi.setAttribute("id", "layerListLi" + flag);//给li标签添加id
    ul.appendChild(layerListLi);//向ul中添加li
    layerListDivShow.setAttribute("id", "layerShowBtn" + flag);//设置Showdiv的id
    layerListDivDel.setAttribute("id", "layerDelBtn" + flag);//设置Deldiv的id
    showdelText(layerListDivShow);
    showdelText(layerListDivDel);
    var layerShowBtn = document.getElementById("layerShowBtn" + flag); //设置 显示图层按钮
    // 图层显示 事件
    layerShowBtn.addEventListener("click", function () {
      if (viewer.imageryLayers.get(flag).show == false) {
        viewer.imageryLayers.get(flag).show = true;
      }
      else
        viewer.imageryLayers.get(flag).show = false
    });
    var layerDelBtn = document.getElementById("layerDelBtn" + flag); //设置 删除图层按钮

    var layerListLi = document.getElementById("layerListLi" + flag); //获取需要删除的li
    // 图层删除 事件
    layerDelBtn.addEventListener("click", function () {
      viewer.imageryLayers.remove(viewer.imageryLayers.get(flag));
      ul.removeChild(layerListLi);
    });

  }

  // 添加TMS
  function addTMS(url) {
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: url + "/{z}/{x}/{y}.png",
      })
    );
  }

  // 添加WMS
  function addWMS(url, layerinput) {
    if (!layerinput) {
      var layerName1 = url.split("%3A");
      if (layerName1[1]) {
        layerinput = layerName1[1];
      }
    }
    viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapServiceImageryProvider({
        url: url,
        layers: layerinput,
        parameters: {
          format: 'image/png',
          transparent: true,
          style: '',
        }
      })
    )
  }

  // 定义 checkbox 单个显示方法
  function checkBoxShow(cb0, cb1, cb2) {
    // cb0单选
    function cb0Clicked() {
      if (cb1.checked == false && cb2.checked == false) {
        cb0.checked = true;
      }
      cb1.checked = false;
      cb2.checked = false;
    }
    // cb1单选
    function cb1Clicked() {
      if (cb0.checked == false && cb2.checked == false) {
        cb1.checked = true;
      }
      cb0.checked = false;
      cb2.checked = false;
    }
    // cb2单选
    function cb2Clicked() {
      if (cb1.checked == false && cb0.checked == false) {
        cb2.checked = true;
      }
      cb1.checked = false;
      cb0.checked = false;
    }
    // 方法接收
    cb0.onclick = cb0Clicked;
    cb1.onclick = cb1Clicked;
    cb2.onclick = cb2Clicked;
  }

  // 显示首个cb 方法
  function checkBoxShowFirst(cb) {
    cb.children[0].checked = true;
    cb.children[1].checked = false;
    cb.children[2].checked = false;
  }

  //获取添加图层按钮
  var addLayer = document.getElementById("addLayer");
  //获取表单
  var formAdd = document.getElementById("addForm");
  // 获取表单添加按钮
  var addConfirm = document.getElementById("layerAdd");
  // 获取表单取消按钮
  var addCancel = document.getElementById("layerCancel");
  // 获取服务url内容
  var urlInput = document.getElementById("urlInput");
  // 获取服务名称
  var layerInput = document.getElementById("layerInput");
  // 获取图层名称
  var nameInput = document.getElementById("nameInput");
  //获取图层列表ul
  var layerUl = document.getElementById("layerUl");

  // 添加图层窗口 打开按钮事件
  addLayer.addEventListener("click", function () {
    formAdd.style.display = "block";
    checkBoxShowFirst(checkBox);
  });

  // 获取图层添加成功/失败显示框
  var addOk = document.getElementById("addOk");
  var addFail = document.getElementById("addFail");

  // 表单添加事件
  addConfirm.addEventListener("click", function () {
    // 获取图层数
    var layerLength = viewer.imageryLayers._layers.length;
    // 添加图层
    if (urlInput.value) {
      // 选择TMS
      if (checkBox.children[0].checked) {
        addTMS(urlInput.value);
      }
      // 选择WMS
      if (checkBox.children[1].checked) {
        addWMS(urlInput.value, layerInput.value);
      }
      // 选择WMTS
      if (checkBox.children[2].checked) {
        alert("功能未开放!");
      }
      // 添加 图层 列表
      if (viewer.imageryLayers._layers.length > layerLength) {
        addListLayer(layerUl, layerLength);
        formAdd.style.display = "none";
        layerAddResult(addOk);
        urlInput.value = '';
        layerInput.value = '';
        nameInput.value = '';
      }
    }
    // 添加图层失败
    else {
      layerAddResult(addFail);
      formAdd.style.display = "none";
      urlInput.value = '';
      layerInput.value = '';
      nameInput.value = '';
    }
  });

  //获取 表单url后 ...按钮
  var defaultLayerName = document.getElementById("defaultLayerName");
  // 直接获取公司地址 图层名称
  defaultLayerName.addEventListener("click", function () {
    if (urlInput.value) {
      var layerName1 = urlInput.value.split("%3A");
      if (layerName1[1]) {
        layerInput.value = layerName1[1];
      }
    }
  })
  // 表单取消事件
  addCancel.addEventListener("click", function () {
    formAdd.style.display = "none";
  });
  // 获取checkbox
  var checkBox = document.getElementById("checkboxForm");
  checkBoxShow(checkBox.children[0], checkBox.children[1], checkBox.children[2]);

})
</script>
 
<style scoped></style>